Ext.define('extjs6test.view.Login', {
    extend: 'Ext.Panel',

    requires: [
        'extjs6test.view.LoginController',
        'extjs6test.view.LoginModel',
        'extjs6test.model.core.User'
    ],
    alias: 'widget.extjsdemologin',
    controller: 'login',
    viewModel: {
        type: 'login'
    },
    bind: {
        title: '{loginWindowName}'
    },
    titleAlign:'center',
    bodyPadding: 20,
    bodyStyle: {
        "background-image": "url('http://examples.sencha.com/extjs/6.0.2/examples/admin-dashboard/resources/images/lock-screen-background.jpg')",
        "background-size": "cover",
        "background-repeat": "repeat"

    },
    layout: 'center',
    defaultButton: 'loginButton',
    items: [
        {
            xtype: 'form',
            reference:'loginForm',
            width:400,
            layout: {
                type: 'vbox',
                align: 'stretch'
            },
            defaults: {
                margin: 5,
                height:55
            },
            bodyPadding:20,
            items: [
                {
                    xtype: 'label',
                    bind:{
                        text: '{pleaseInputYourAccount}'
                    },
                    height:20
                },
                {
                    xtype: 'pickerfield',
                    allowBlank: false,
                    name: 'userName',
                    // ui:'login-useraccount-field',
                    cls:'useraccount',
                    padding:15,
                    bind: {
                        // fieldLabel: '{userName}'
                        // emptyText:'{userName}'
                    }
                },
                {
                    xtype: 'pickerfield',
                    inputType: 'password',
                    allowBlank: false,
                    name: 'password',
                    padding:15,
                    cls:'password',
                    // ui:'login-password-field',
                    bind: {
                        // fieldLabel: '{password}'
                        // emptyText:'{password}'
                    }
                },
                {
                    xtype:'toolbar',
                    height:40,
                    layout:{
                        type:'hbox',
                        align:'stretch'
                    },
                    items:[
                        {
                            xtype:'checkbox',
                            bind:{
                                boxLabel:'{rememberMe}'
                            },
                            inputValue:'y'
                        },
                        '->',
                        {
                            xtype:'box',
                            style:{
                                'line-height':'30px'
                            },
                            bind:{
                                html:'<a href="#">{forgotPassword}</a>'
                            }
                        }
                    ]
                },
                {
                    xtype: 'button',
                    handler: 'onLoginClick',
                    bind: {
                        text: '{loginButton}'
                    }
                },
                {
                    xtype: 'button',
                    handler: 'onResetClick',
                    bind: {
                        text: '{resetButton}'
                    }
                }
            ]
        }

    ]
});
